<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

</head>
<style>
    .dh {
        width: 80px;
        height: 100px;
        color: rgb(0, 0, 0);
        background-color: rgb(255, 247, 173);
        position: fixed;
        left: 1550px;
        bottom: 120px;
        border-radius: 80%;
        margin: 85px auto;
    }
    
    .ti {
        position: relative;
        color: rgb(255, 98, 98);
        top: 16px;
        left: 8px;
        display: block;
    }
    
    .ti {
        text-decoration: none;
    }
    
    .ti:hover {
        color: rgb(150, 232, 243);
    }
    
    .A {
        height: 100px;
        position: relative;
        left: 1000px;
        top: 1200px;
    }
    
    body {
        background-color: rgb(245, 198, 198);
    }
    
    .bj {
        position: absolute;
        top: 20px;
        left: 120px;
        z-index: -305;
    }
    
    .bj1 {
        position: absolute;
        left: 120px;
        top: 900px;
        z-index: -500;
    }
    
    .bj2 {
        position: absolute;
        left: 10px;
        top: 950px;
        z-index: -35;
    }
    
    .bj3 {
        position: absolute;
        left: 3px;
        top: 420px;
        z-index: -25;
    }
    
    .ellipse {
        position: relative;
        left: 100px;
        bottom: 160px;
        width: 220px;
        height: 80px;
        background-color: rgb(252, 244, 135);
        border-radius: 100%;
        -o-border-rodius: 100%;
        -ms-border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        z-index: -15;
        text-shadow: 5px 5px 5px #74aed4;
    }
    
    .hi {
        position: relative;
        top: 120px;
        left: 330px;
        transition: 3s;
        text-shadow: 5px 5px 5px #74aed4;
    }
    
    .hi:hover {
        box-shadow: rgb(140, 196, 245);
        width: 200px;
        height: 200px;
        transform: rotate(360deg);
    }
    
    .yiwen {
        position: relative;
        top: 120px;
        left: 430px;
    }
    
    .ww {
        position: relative;
        left: 755px;
        top: 140px;
    }
    
    .wl {
        position: relative;
        left: 640px;
        top: 245px;
        text-shadow: 5px 5px 5px #74aed4;
    }
    
    .ty {
        position: relative;
        width: 500px;
        height: 400px;
        background-color: rgb(235, 130, 156);
        border-radius: 30%;
        top: 50px;
        left: 350px;
        z-index: -10;
    }
    
    .gyw {
        position: relative;
        top: 250px;
        left: 430px;
        color: rgb(144, 211, 255);
        font-size: 80px;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .gyw:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .a {
        position: relative;
        top: -280px;
        left: 420px;
        color: rgb(255, 255, 255);
        font-size: 30px;
    }
    
    .me {
        position: relative;
        bottom: 850px;
        left: 230px;
        height: 350px;
        width: 350px;
        border-radius: 50%;
        margin: 100px auto;
        overflow: hidden;
        border: 1px solid rgb(253, 175, 175);
    }
    
    .me img {
        width: 350px;
        height: 350px;
        transition: all 1.5s;
    }
    
    .me img:hover {
        box-shadow: 1 1 10px rgb(207, 111, 111);
        transform: scale(1.5);
        transform: rotate(360deg);
    }
    
    .xka {
        position: relative;
        top: 50px;
        left: 550px;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: 5px 5px 5px #74aed4;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .xka:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .grzp {
        position: relative;
        top: 130px;
        left: 590px;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .grzp:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .im {
        position: relative;
        top: 70px;
        left: 650px;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: 5px 5px 5px #74aed4;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .im:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .wang {
        position: relative;
        top: 120px;
        left: 600px;
        transition: all 3s;
        animation: move 3s 1.5s infinite;
        text-shadow: 5px 5px 5px #ffe9f6;
    }
    
    .wang:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .er {
        position: relative;
        top: 100px;
        left: 130px;
        height: 300px;
        font-weight: 200px;
        overflow: hidden;
    }
    
    .b img:hover {
        transform: scale(1.2);
    }
    
    .jiu {
        position: relative;
        top: 120px;
        right: 295px;
        height: 300px;
    }
    
    .san {
        position: relative;
        top: 100px;
        left: 220px;
        height: 300px;
        font-weight: 200px;
    }
    
    .liu {
        position: relative;
        top: 100px;
        left: 280px;
        height: 300px;
        z-index: -1;
    }
    
    .qi {
        position: relative;
        top: 423px;
        left: -150px;
        height: 300px;
        font-weight: 200px;
    }
    
    .cimg:hover {
        transform: scale(1.2);
    }
    
    .ba {
        position: relative;
        top: 410px;
        left: 10px;
        height: 600px;
        font-weight: 300px;
    }
    
    .b img:hover {
        transform: scale(1.1);
        transition: all 1s;
    }
    
    .zy {
        position: relative;
        top: 100px;
        left: 150px;
        height: 300px;
        font-weight: 200px;
    }
    
    .yy {
        position: relative;
        top: 430px;
        left: -65px;
        height: 300px;
        font-weight: 200px;
    }
    
    .sh {
        position: relative;
        top: 120px;
        left: 437px;
        height: 300px;
        font-weight: 200px;
    }
    
    .c img:hover {
        transform: scale(1.1);
        transition: all 1s;
    }
    
    .rs {
        position: relative;
        top: -580px;
        left: 480px;
        color: rgb(255, 255, 255);
        font-size: 30px;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
        text-shadow: 5px 5px 5px #74aed4;
    }
    
    .rs:hover {
        transform: translate(0, 50px)scale(1, 1.5);
        animation: move 3s 1.5s infinite alternate;
    }
    
    .wx {
        position: relative;
        top: 450px;
        left: 507px;
        height: 200px;
        font-weight: 200px;
        border: 1px solid rgb(131, 187, 236);
        padding: 3px;
        background-color: rgb(139, 156, 77);
    }
    
    .wxxx img:hover {
        transform: scale(1.1);
        transition: all 1s;
    }
    
    .box {
        position: relative;
        top: -90px;
        left: -35px;
        margin: 0 auto;
        display: block;
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        border-top-color: rgb(255, 255, 255);
        animation: animate 1s ease-in infinite alternate;
    }
    
    @keyframes animate {
        0% {
            transition: translate(0, 0);
        }
        50% {
            border-top-color: rgb(255, 144, 222);
        }
        100% {
            transform: translate(0px, 50px);
        }
    }
    
    .box1 {
        position: relative;
        top: 220px;
        left: -550px;
        margin: 0 auto;
        display: block;
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        border-top-color: rgb(255, 255, 255);
        animation: animate 1s ease-in infinite alternate;
        z-index: -50;
    }
    
    @keyframes animate {
        0% {
            transition: translate(0, 0);
        }
        50% {
            border-top-color: rgb(255, 144, 222);
        }
        100% {
            transform: translate(0px, 50px);
        }
    }
    
    .box2 {
        position: relative;
        top: -110px;
        left: -400px;
        margin: 0 auto;
        display: block;
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        border-top-color: rgb(255, 255, 255);
        animation: animate 1s ease-in infinite alternate;
    }
    
    .box3 {
        position: relative;
        top: -30px;
        left: -800px;
        margin: 0 auto;
        display: block;
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        border-top-color: rgb(255, 255, 255);
        animation: animate 1s ease-in infinite alternate;
    }
    
    .wxx {
        position: relative;
        top: 130px;
        left: 710px;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: 5px 5px 5px #74aed4;
        transition: all 3s;
        animation: move 3s 1.5s infinite alternate;
    }
    
    .jz {
        position: relative;
        top: 1150px;
        left: 800px;
    }
    
    .jz2 {
        position: relative;
        top: 1030px;
        left: 500px;
    }
</style>

<body>
    <div class="dh"><a href="#gerenjieshao" class="ti">个人介绍</a>
        <a href="#grzpp" class="ti">个人作品 </a>
        <a href="#wxwx" class="ti">联系方式</a></div>

    <div class="bj">
        <img src="bj.jpg" width="1400px" height="700px">
    </div>

    <div class="hi">
        </p><span style="font-size: 120px;color: aliceblue;">hi</span></div>
    <div class="yiwen">
        </p><span style="font-size: 75px;color: aliceblue;">this is</span>
    </div>
    <div class="wang">
        </p><span style="font-size: 90px;color: rgb(253, 138, 138);">whang shiqin</span></div>
    <div class="ww">
        </p><span style="font-size: 30px;color: rgb(214, 113, 113);">welcome you</span></div>

    <div class="wl">
        <div class="ellipse"></div>
    </div>
    </div>
    <div class="im">

        </p><span style="font-size: 35px;color: rgb(253, 253, 253);">I'm an interesting designer</span></div>
    <div class="gyw">
        <a href="#" class="box2"></a>
        <p id="gerenjieshao">个人介绍<span style="font-size: 60px;color: rgb(138, 198, 255);"></span></p>
    </div>
    </div>
    <div class="ty">

    </div>
    <div class="xka">
        <p><span style="font-size: 35px;color: rgb(253, 253, 253);">我和你比起来，真是小可爱见大可爱。</span> </p>
    </div>
    <div class="a">

        <p>姓名：王诗琴 性别：女</p>
        <p>专业：ui设计师 交互设计师</p>
        <p>爱好：画画 摄影 美食 旅游</p>
    </div>
    <a href="#" class="box"></a>
    <div class="me"> <img src="me.jpg" width="500px" height="500px" alt=""></div>
    <div class="bj1"><img src="bj2.jpg" width="1400px" height="700px">
        <div class="grzp">
            <h1 id="grzp1">
                <p id="grzpp"><span style="font-size: 50px;color: rgb(134, 211, 255);">个人作品</span></p>
            </h1>
        </div>
        <a href="#" class="box1"></a>
        <div class="b">
            <img src="2.jpg" alt="" class="er">
            <img src="3.jpg" alt="" class="san">
            <img src="6.jpg" alt="" class="liu">
            <img src="7.jpg" alt="" class="qi">
            <img src="10.jpg" alt="" class="sh">
            <img src="9.jpg" alt="" class="jiu">
            <img src="5.jpg" alt="" class="wu">
        </div>
        <div class="c">
            <img src="zy.jpg" alt="" class="zy">
            <img src="11.jpg" alt="" class="yy">
            <img src="8.jpg" alt="" class="ba"></div>

        <div class="rs">
            <a href="#" class="box1"></a>
            </p><span style="font-size: 35px;color: rgb(253, 253, 253);">人生很短，要做自己喜欢的事呀。</span>
            </divc>
        </div>
        <div class="wxxx"><img src="wx.jpg" alt="" class="wx"></div>

        <div class="wxx">
            <a href="#" class="box3"></a>
            <a name="wxwx"></a>
            <p><span style="font-size: 35px;color: rgb(253, 253, 253);">欢迎扫码加微信呀！</span></p>
        </div>
        <div class="bj2"><img src="bj1.jpg" width="1400px" height="800px">
            <div class="bj2"><img src="bj1.jpg" width="1400px" height="700px">


                <div class="bj3">
                    <div class="bj3"><img src="bj3.jpg" width="1400px" height="700px"></div>
                    <div class="jz">
                        <img src="22.png" alt="" width="50px" height="50px" class="qq">
                        <h3>2469057243</h3>
                    </div>
                    <div class="jz2"><img src="33.png" alt="" width="50px" height="50px" class="wb">
                        <h3>-cuteqin</h3>
                    </div>
</body>


</html>